import { login, getUserInfo, getUsers } from '@/api/user'
import { getToken, setToken, removeToken, setTimestamp } from '@/utils/auth'
import { resetRouter } from '@/router'

// 状态
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合
const state = {
  token: getToken() || '', // 设置token初始状态   token持久化 => 放到缓存中
  userInfo: {}, // 用来接收用户的信息
  userID: '', // 用户ID
  userUrl: '',
  companyId: ''
}
const mutations = {
  // 修改token方法
  setToken(state, token) {
    state.token = token // 设置token  只是修改state的数据
    // vuex变化 => 缓存数据
    setToken(token) // vuex和 缓存数据的同步
  },
  removeToken(state) {
    state.token = null // 变为空
    removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
  },
  // 修改用户信息方法
  setUserInfo(state, obj) {
    state.userInfo = obj
    state.userID = obj.userId
    state.companyId = obj.companyId
  },
  removeUserInfo(state) {
    state.userInfo = {}
  }
}
const actions = {
  // 调用登录接口获取token存储到本地
  // 登录方法
  async setLogin({ commit }, formData) {
    const data = await login(formData)
    // console.log(data)
    // 这里data是token
    // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
    // 现在有用户token
    // actions 修改state 必须通过mutations
    commit('setToken', data)
    // 在登录的时候存储当前的时间
    setTimestamp()
  },
  // 获取个人信息方法
  async setUserInfo({ commit }) {
    const obj = await getUserInfo()
    // console.log(obj)
    // 获取头像信息
    const detail = await getUsers(obj.userId)
    // console.log(url)
    commit('setUserInfo', {
      ...obj,
      ...detail
    })
    return obj
  },
  logout({ commit }) {
    // 退出重置路由配置
    resetRouter()
    commit('removeToken')
    commit('removeUserInfo')
  }
}

export default {
  // 命名空间
  namespaced: true,
  state,
  mutations,
  actions
}
